<template>
  <div class="sync-container">
    <!-- 输入框 -->
    <input 
      type="text" 
      v-model="textContent" 
      placeholder="输入文字，下方将同步显示"
      class="input-small"
    >
    
    <!-- 同步显示的文本框 -->
    <textarea 
      v-model="textContent" 
      rows="8" 
      placeholder="同步显示的内容"
      class="input-large"
    ></textarea>
  </div>
</template>

<script setup>
// 在 <script setup> 中直接声明响应式数据，无需 export default
import { ref } from 'vue';

// 创建响应式变量，用于双向绑定
const textContent = ref('');
</script>

<style scoped>
.sync-container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.input-small {
  padding: 8px 12px;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.input-large {
  padding: 12px;
  width: 500px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical; /* 允许垂直拉伸 */
}
</style>